<template>
  <div>
    <el-tabs
      v-model="activeName"
      type="border-card"
      tab-position="left"
      style="height: 730px; width: 100%; margin-top: 10px;"
    >
      <!-- 我的信息 -->
      <el-tab-pane name="myInfoTab">
        <span slot="label" class="el-tab-pane">
          <i class="el-icon-bank-card"></i> 我的信息
        </span>
        <my-info></my-info>
      </el-tab-pane>
      <!-- 常用联系人 -->
      <el-tab-pane>
        <span slot="label" class="el-tab-pane">
          <i class="el-icon-phone"></i> 常用联系人
        </span>
        <top-contacts></top-contacts>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label" class="el-tab-pane">
          <i class="el-icon-postcard"></i> 常用乘机人
        </span>
        <frequent-passenger></frequent-passenger>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MyInfo from "../components/MyInfo";
import FrequentPassenger from "../components/FrequentPassenger.vue";
import TopContacts from "../components/TopContacts.vue";

export default {
  components: {
    MyInfo,
    TopContacts,
    FrequentPassenger,
  },

  data() {
    TopContacts;
    return {
      activeName: "myInfoTab",
      isEditing: "", //编辑按钮切换
      imageUrl: "", // 头像预览地址
      username: "John Doe",
      sex: "1", // 默认选中
    };
  },
  methods: {},
};
</script>

<style scoped>
.el-tab-pane {
  width: 100%;
  font-size: 18px;
  float: left;
  text-align: left;
}
</style>